<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col :span="18">
        <el-radio-group size="small" v-model="queryParams.invoiceState">
          <el-radio-button label="ISSUANCE_ING">开具中</el-radio-button>
          <el-radio-button label="ISSUED">已开具</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <TheTable
      ref="tableRefs"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
    <TheEditForm
      ref="invoiceRefs"
      :options="formOptions"
      :form.sync="invoiceForm"
      labelPosition="top"
      width="400px"
      labelWidth="300px"
      @submit="handleUpload"
    ></TheEditForm>
    
  </div>
</template>
<script>
import {
  apiCommercialVoucherList,
  apiCommercialVoucherUploadInvoice
} from "@/api/invoice.js";
import TheEditForm from "@/components/TheCreateForm";
export default {
  components: { TheEditForm },
  data() {
    const _this = this;
    return {
      activeStatus: "1",
      queryParams: { invoiceState: "ISSUANCE_ING" },
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      queryPageApi: apiCommercialVoucherList,
      tableOption: [
        {
          label: "id",
          prop: "commercialVoucherId",
          width: 120
        },

        {
          label: "商家名称",
          prop: "merchantName",
          width: 200
        },
        {
          label: "金额",
          prop: "amountOfMoney",
          width: 150,
          formatter({ amountOfMoney }) {
            return this.$filters.filterPriceFormat(amountOfMoney || 0);
          }
        },
        {
          label: "状态",
          prop: "invoiceState",
          width: 120,
          formatter({ invoiceState }) {
            return invoiceState == "ISSUED" ? "已开具" : "开具中";
          }
        },
        {
          label: "创建时间",
          width: 120,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },

        {
          label: "完成时间",
          width: 120,
          prop: "finishTime",
          render(createElement, { row }) {
            try {
              const strArr = row.finishTime.split(" ");
              const dom = (
                <div class="row">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "操作",
          width: 120,
          prop: "operate",
          fixed: "right",
          render(h, { row }) {
            return h("div", [
              h("el-link", {
                domProps: {
                  innerHTML: "上传发票"
                },
                directives: [
                  {
                    name: "column-domItem-show",
                    value: ["ISSUANCE_ING"].includes(row.invoiceState)
                  }
                ],
                props: {
                  type: "primary"
                },
                on: {
                  click() {
                    _this.uploadCurrent = { ...row };
                    _this.$refs.invoiceRefs.open();
                  }
                }
              }),
              // 已开具显示
              h("el-link", {
                domProps: {
                  innerHTML: "下载发票"
                },
                props: {
                  type: "primary"
                },
                directives: [
                  {
                    name: "column-domItem-show",
                    value: ["ISSUED"].includes(row.invoiceState)
                  }
                ],
                on: {
                  click() {
                    window.open(row.invoiceAddress);
                  }
                }
              })
            ]);
          }
        }
      ],
      invoiceForm: {},
      uploadCurrent: {},
      formOptions: [
        {
          type: "upload",
          field: "invoiceAddress",
          title: "上传证据",
          maxlength: 1,
          fileType: "text",
          default: [],
          rules: [{ required: true, message: "请上传电子发票", trigger: "change" }],
          thumbnail: true,
         
        }
   
      ]
    };
  },
  mounted() {
  },
  methods: {
    handleUpload(values) {
      console.log(values, "ssss");
      apiCommercialVoucherUploadInvoice({
        id: this.uploadCurrent.id,
        invoiceAddress: values.invoiceAddress.join(",")
      }).then(res => {
        this.$refs.tableRefs.refresh();
        this.$message({
          type: "success",
          message: "上传成功"
        });
      });
    }
  }
};
</script>
